<template>
    <div class="affiliatedWay">
        <div class="common_br">
            <h2 class="common_title extra_title">挂靠信息
                <Button
                    type="primary"
                    class="fr"
                    @click="saveAffiliated()"
                    style="margin:7.5px 50px 0;"
                    v-show="!isShowDetails">保存
                </Button>
            </h2>
            <div class="common_content">
                <div v-if="tempAffiMode=='01'">
                    <Row>
                        <Col span="8">
                            <FormItem label="公司名称" prop="affiliatedId">
                                <Select
                                    v-model="affiliatedForm.affiliatedId"
                                    placeholder="请输入搜索"
                                    class="w200"
                                    filterable
                                    remote
                                    :remote-method="remoteAffilateName"
                                    :loading="loadModel"
                                    @on-change="selecteAffiliatedName($event,'01')"
                                    @on-open-change="openAffiliateName"
                                    @on-query-change="queryAffilateName"
                                    :disabled="isShowDetails"
                                >
                                    <Option :value="item.id" v-for="(item,index) in companyList" :key="index">
                                        {{item.affiliatedName}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="统一信用社会代号" prop="socUniCrtCode">
                                <Input v-model="affiliatedForm.socUniCrtCode" class="w200" :disabled="isdisabled"
                                       placeholder="选择挂靠公司后自动带入"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="法人姓名" prop="legalName">
                                <Input v-model="affiliatedForm.legalName" class="w200" :disabled="isdisabled"
                                       placeholder="选择挂靠公司后自动带入"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="联系电话" prop="legalPhone">
                                <Input v-model="affiliatedForm.legalPhone" class="w200" :disabled="isdisabled"
                                       placeholder="选择挂靠公司后自动带入"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="运输许可证有效期" prop="licenceEndDate">
                                <Input v-model="affiliatedForm.licenceEndDate" class="w200" :disabled="isdisabled"
                                       placeholder="选择挂靠公司后自动带入"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <!-- <Col span="16"> -->
                        <place-cascade
                            :value="registValue"
                            :form="affiliatedForm"
                            :label="registLabel"
                            :isDetailAddress="true"
                            :location="location"
                            :detailValue="registDetail"
                            :isShowDetails="isShowDetails"
                        ></place-cascade>
                        <!-- </Col> -->
                    </Row>
                </div>
                <!-- 个体工商户 -->
                <div v-if="tempAffiMode=='02'">
                    <Row>
                        <Col span="24">
                            <FormItem label="个体工商挂靠名称" prop="affiliatedName" :label-width="125" class="tip_msg">
                                <Input v-model="affiliatedForm.affiliatedName" class="w200" placeholder="请输入"
                                       :disabled="isShowDetails"/>
                                <span>(不允许出现有限公司、有限责任公司和股份有限公司文字)</span>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
                <!-- 网约车 -->
                <div v-if="tempAffiMode=='03'">
                    <Row>
                        <Col span="10">
                            <FormItem label="运营公司" prop="affiliatedId">
                                <Select v-model="affiliatedForm.affiliatedId"
                                        placeholder="请选择"
                                        class="w200"
                                        @on-open-change="queryCompanyList($event,'03')"
                                        @on-change="selecteAffiliatedName($event,'03')"
                                        :label-in-value="true"
                                        :disabled="isShowDetails"

                                >
                                    <Option :value="item.id" v-for="(item,index) in companyList" :key="index">
                                        {{item.affiliatedName}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="10">
                            <FormItem label="网约车平台" prop="platformId">
                                <Select v-model="affiliatedForm.platformId"
                                        placeholder=""
                                        class="w200"
                                        @on-open-change="queryPlatList"
                                        @on-change="selectePlateName"
                                        :label-in-value="true"
                                        :disabled="isShowDetails"
                                >
                                    <Option :value="item.id" v-for="(item,index) in plateList" :key="index">
                                        {{item.cooperPlat}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        saveAffiliatedUnit,
        updateAffiliatedUnit,
        getAffiliatedUnitsList,
        getCooperPlatList
    } from '_p/afs-apply/api/apply-report/personal/businessOption'
    import PlaceCascade from "@/components/place-cascade"
    import {
        getDictDataByType
    } from "_p/basic/api/admin/datadic";

    export default {
        name: "affiliatedWay",
        data() {
            return {
                loadModel: false,
                affiliatedName: "",
                cooperPlatform: "",
                tempSocUniCrtCode: "",//网约车挂靠的code

                registLabel: '注册地点',
                registValue: "registLocation",
                registDetail: "registAddress",

                isdisabled: true,
                isTipMsg: false,
                // 公司列表
                companyList: [],
                // 网约车列表
                plateList: [],
            }
        },
        props: {
            affiliatedForm: {
                type: Object,
                require: true
            },
            tempAffiMode: {
                type: String,
                require: true
            },
            applyNo: {
                // type:String,
            },
            tempaffiliatedId: {
                type: String
            },
            capitalId: {
                type: String
            },
            location: {
                type: Array,
                require: true,
            },
            tempChannelId: {
                type: String,
            },
            tempAffiInfo: {
                type: Object,
            },
            isShowDetails: {
                type: Boolean,
            }
        },
        components: {
            PlaceCascade
        },
        watch: {
            tempAffiInfo(val) {
                if (Object.keys(val).length > 0) {
                    this.affiliatedName = val.affiliatedName;
                    if (this.tempAffiMode != "02") {
                        let tempCompanyList = [];
                        let companyObj = {
                            id: val.affiliatedId,
                            affiliatedName: val.affiliatedName,
                        }
                        tempCompanyList.push(companyObj);
                        this.companyList = tempCompanyList;

                        this.affiliatedForm.affiliatedId = val.affiliatedId;
                    }
                    // 初始化构造网约车列表
                    if (this.tempAffiMode == "03") {
                        let tempPlateList = [];
                        let plateObj = {
                            id: val.platformId,
                            cooperPlat: val.cooperPlatform,
                        }
                        tempPlateList.push(plateObj);
                        this.plateList = tempPlateList;
                        this.tempSocUniCrtCode = val.socUniCrtCode
                    }
                }
            }
        },
        created() {

        },
        mounted() {
        },
        methods: {
            showTipMsg() {
                this.isTipMsg = true;
            },
            hideTipMsg() {
                this.isTipMsg = false;
            },
            remoteAffilateName(val) {

            },
            queryAffilateName(val) {
                if (val != this.affiliatedForm.affiliatedId) {
                    this.queryAffiliatedCompany("01", val);
                }
            },
            // 一聚焦表单值为空就调接口
            openAffiliateName(val) {
                if (val) {
                    if (!this.affiliatedName.trim()) {
                        this.queryAffiliatedCompany("01", this.affiliatedName)
                    }
                }
            },
            // 点击保存挂靠信息
            saveAffiliated() {
                if (!this.applyNo) {
                    this.$Message.warning("请先保存业务类型");
                    return;
                }
                let param = {
                    applyNo: this.applyNo,
                    affiliatedType: this.tempAffiMode,
                    carId: this.capitalId
                }
                // 公司挂靠
                if (this.tempAffiMode == "01") {
                    param.affiliatedId = this.affiliatedForm.affiliatedId;
                    param.affiliatedName = this.affiliatedName;
                    param.socUniCrtCode = this.affiliatedForm.socUniCrtCode;
                    param.legalName = this.affiliatedForm.legalName;
                    param.legalPhone = this.affiliatedForm.legalPhone;
                    param.licenceEndDate = this.affiliatedForm.licenceEndDate;
                    param.registProvince = this.affiliatedForm.registLocation[0];
                    param.registCity = this.affiliatedForm.registLocation[1];
                    param.registAddress = this.affiliatedForm.registAddress;

                }
                // 个体工商户
                else if (this.tempAffiMode == "02") {
                    param.affiliatedName = this.affiliatedForm.affiliatedName;
                }
                // 网约车
                else if (this.tempAffiMode == "03") {
                    param.affiliatedId = this.affiliatedForm.affiliatedId;
                    param.affiliatedName = this.affiliatedName;
                    param.socUniCrtCode = this.tempSocUniCrtCode;
                    param.platformId = this.affiliatedForm.platformId;
                    param.cooperPlatform = this.cooperPlatform;
                }

                if (this.tempaffiliatedId) {
                    param.id = this.tempaffiliatedId;
                    updateAffiliatedUnit(param).then(res => {
                        if (res.code == "0000") {
                            this.$Message.success("更新挂靠信息成功");
                        }
                    })
                } else {
                    saveAffiliatedUnit(param).then(res => {
                        if (res.code == "0000") {
                            this.$emit('saveAffiliatedId', res.data.id)
                            this.$Message.success("保存挂靠信息成功");
                        }
                    })
                }

            },
            // 总保存需要的挂靠信息入参
            passAffiData() {
                let param = {
                    affiliatedType: this.tempAffiMode,
                    carId: this.capitalId
                }
                // 公司挂靠
                if (this.tempAffiMode == "01") {
                    param.affiliatedId = this.affiliatedForm.affiliatedId;
                    param.affiliatedName = this.affiliatedName;
                    param.socUniCrtCode = this.affiliatedForm.socUniCrtCode;
                    param.legalName = this.affiliatedForm.legalName;
                    param.legalPhone = this.affiliatedForm.legalPhone;
                    param.licenceEndDate = this.affiliatedForm.licenceEndDate;
                    param.registProvince = this.affiliatedForm.registLocation[0];
                    param.registCity = this.affiliatedForm.registLocation[1];
                    param.registAddress = this.affiliatedForm.registAddress;

                }
                // 个体工商户
                else if (this.tempAffiMode == "02") {
                    param.affiliatedName = this.affiliatedForm.affiliatedName;
                }
                // 网约车
                else if (this.tempAffiMode == "03") {
                    param.affiliatedId = this.affiliatedForm.affiliatedId;
                    param.affiliatedName = this.affiliatedName;
                    param.socUniCrtCode = this.tempSocUniCrtCode;
                    param.platformId = this.affiliatedForm.platformId;
                    param.cooperPlatform = this.cooperPlatform;
                }
                if (this.tempaffiliatedId) {
                    param.id = this.tempaffiliatedId;
                }
                return param;

            },
            queryCompanyList(val, type) {
                if (val) {
                    this.queryAffiliatedCompany(type)
                }
            },
            queryPlatList(val) {
                if (val) {
                    this.queryCooperPlatList(this.tempSocUniCrtCode);
                }
            },
            // 查询挂靠公司列表
            queryAffiliatedCompany(type, searchValue) {
                let param = {
                    affiliatedType: this.tempAffiMode,
                }
                if (type == "01") {
                    param.affUnitsName = searchValue;
                } else if (type == "03") {
                    param.affUnitsName = "";
                    this.companyList = [];
                }
                getAffiliatedUnitsList(param).then(res => {
                    if (res.code == "0000") {
                        this.companyList = res.data
                        console.log(res.data, "queryAffiliatedCompany")
                    }
                })
            },
            // 查询网约车列表
            queryCooperPlatList(socUniCrtCode) {
                let param = {
                    socUniCrtCode: socUniCrtCode,//选择挂靠名称返回
                }
                if (socUniCrtCode) {
                    getCooperPlatList(param).then(res => {
                        if (res.code == "0000") {
                            this.initDataic(res.data[1].cooperPlat)
                        }
                    })
                } else {
                    this.$Message.warning("请先选择运营公司")
                }
            },
            // 获取数据字典
            initDataic(cooperPlat) {
                this.plateList = [];
                let param = {
                    type: "netCarCooperPlat",
                };
                getDictDataByType(param.type).then(res => {
                    if (res.code == "0000") {
                        let tempArr = [];
                        res.data.forEach((item, index) => {
                            if (cooperPlat.indexOf(item.value) != "-1") {
                                let obj = {
                                    id: item.value,
                                    cooperPlat: item.title,
                                }
                                tempArr.push(obj);
                            }
                        })
                        this.plateList = tempArr;
                    }
                })
            },
            // 当挂挂靠公司列表下拉框数据改变时
            selecteAffiliatedName(event, type) {
                if (event) {
                    // 公司挂靠
                    if (type == "01") {
                        this.companyList.forEach((item, index) => {
                            // 匹配id对应相应的参数
                            if (item.id == event) {
                                this.affiliatedName = item.affiliatedName;
                                this.affiliatedForm.socUniCrtCode = item.socUniCrtCode;
                                this.affiliatedForm.legalName = item.legalPersonName;
                                this.affiliatedForm.licenceEndDate = item.transPermitValidity;
                                this.affiliatedForm.legalPhone = item.legalPersonTel;
                                this.affiliatedForm.registAddress = item.registeredAddress;
                                let tempArr = [];
                                tempArr[0] = item.registeredProvince;
                                tempArr[1] = item.registeredCity;
                                this.affiliatedForm.registLocation = tempArr;
                            }
                        })
                    } else if (type == "03") {
                        this.affiliatedName = event.label;
                        this.companyList.forEach((item, index) => {
                            if (item.id == event.value) {
                                this.tempSocUniCrtCode = item.socUniCrtCode;
                                let tempLocation = [];
                                tempLocation[0] = item.registeredProvince;
                                tempLocation[1] = item.registeredCity;
                                if (item.registeredProvince && item.registeredCity) {
                                    this.$emit('queryRecordAddress', tempLocation)
                                }
                            }
                        })
                    }
                } else {
                    this.companyList = [];
                }
            },
            selectePlateName(event) {
                this.cooperPlatform = event.label;
            }
        }
    }
</script>
<style scoped>
    .tip_img {
        position: absolute;
        cursor: pointer;
        top: 0px;
        left: 230px;
    }

    .tip_img > img {
        width: 20px;
        margin-top: 8px;
    }

    .tip_img > i {
        position: absolute;
        top: -37px;
        min-width: 220px;
        left: -100px;
        line-height: 16px;
        font-style: normal;
        text-align: center;
        background-color: #727272;
        color: white;
        border-radius: 5px;

    }

    .tip_img > i::after {
        content: "";
        width: 0;
        height: 0;
        border-width: 12px 5px 0;
        border-style: solid;
        border-color: #727272 transparent transparent;
        margin: 40px auto;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .tip_msg >>> label {
        margin-right: 20px;
    }
</style>
